<template>
	<view class="recommend">
		<block v-if="tempArr.length">
			<view v-if="isShowTitle" class="flex-center recommend-box mt-20 mb-24">
				<image :src="`${urlDomain}crmebimage/presets/haowuzuo.png`"></image>
				<view class="f-s-32 lh-44rpx ml-4">热门推荐</view>
				<image class="ml-6" :src="`${urlDomain}crmebimage/presets/haowuyou.png`"></image>
			</view>
			<view class="recommendList borderPad" :class="isShowTitle ? '' : 'mt30'">
				<WaterfallsFlow :wfList="tempArr" :type="1" :isStore="1">
					<template slot-scope="{ item }">
						{{ item.name }}
						<WaterfallsFlowItem :item="item" :type="1" :isStore="1" />
					</template>
				</WaterfallsFlow>
			</view>
			<view class="loadingicon acea-row row-center-wrapper" :hidden="loading == false">
				<text class="loading iconfont icon-jiazai"></text>
			</view>
			<view class="mores-txt flex" v-if="goodScroll">
				<text>我是有底线的</text>
			</view>
		</block>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
import animationType from '@/utils/animationType.js';
import { getProductHot } from '@/api/product.js';
import WaterfallsFlow from '@/components/WaterfallsFlow/WaterfallsFlow.vue';
import WaterfallsFlowItem from '@/components/WaterfallsFlowItem/WaterfallsFlowItem.vue';
let app = getApp();
export default {
	name: 'recommend',
	computed: mapGetters(['uid']),
	components: {
		WaterfallsFlow
	},
	props: {
		categoryId: {
			type: Number,
			default: function () {
				return 0;
			}
		},
		//是否显示头部
		isShowTitle: {
			type: Boolean,
			default: function () {
				return true;
			}
		},
		//是否使用本页面的请求数据
		isDefault: {
			type: Boolean,
			default: function () {
				return true;
			}
		},
		//使用的页面中调用数据传来的商品列表，isDefault为false时使用
		recommendList: {
			type: Array,
			default: function () {
				return [];
			}
		}
	},
	data() {
		return {
			urlDomain: this.$Cache.get('imgHost'),
			theme: app.globalData.theme,
			goodScroll: false,
			params: {
				//精品推荐分页
				page: 1,
				limit: 10,
				cid: 0
			},
			loading: false,
			tempArr: []
		};
	},
	watch: {
		categoryId: function (val) {
			//监听props中的属性
			if (!this.isDefault) {
				this.params.page = 1;
				this.tempArr = [];
				this.goodScroll = false;
				this.get_host_product();
			}
		}
	},
	mounted() {
		if (this.isDefault) {
			this.params.page = 1;
			this.goodScroll = false;
			this.tempArr = [];
			this.get_host_product();
		} else {
			this.tempArr = this.recommendList;
		}
	},
	methods: {
		/**
		 * 获取我的推荐
		 */
		get_host_product: function () {
			if (this.goodScroll) return;
			this.loading = true;
			this.params.cid = this.categoryId;
			getProductHot(this.params)
				.then((res) => {
					this.$set(this.params, 'page', this.params.page + 1);
					this.goodScroll = this.params.page > res.data.totalPage;
					this.tempArr = this.tempArr.concat(res.data.list || []);
					this.$emit('getRecommendLength', this.tempArr.length);
					this.loading = false;
				})
				.catch((err) => {
					this.loading = false;
				});
		}
	},
	onReachBottom() {
		if (this.isDefault) this.get_host_product();
	}
};
</script>

<style scoped lang="scss">
.recommend-box {
	image {
		width: 42rpx;
		height: 36rpx;
	}

	view {
		font-weight: 600;
	}
}
.mores-txt {
	width: 100%;
	align-items: center;
	justify-content: center;
	height: 70rpx;
	color: #999;
	font-size: 24rpx;

	.iconfont {
		margin-top: 2rpx;
		font-size: 20rpx;
	}
}

.recommend {
	.title {
		height: 120rpx;
		line-height: 120rpx;
		font-size: 32rpx;
		color: #333333;

		.iconfont {
			font-size: 170rpx;
			color: #454545;
		}
	}

	.name {
		margin: 0 28rpx;
	}
}
</style>
